1
00:00:00,660 --> 00:00:02,010
Hello and welcome.

2
00:00:02,100 --> 00:00:11,580
In this lecture we are going to create a structure for how our app is in hastier mail before we king

3
00:00:11,580 --> 00:00:12,830
use javascript.

4
00:00:12,840 --> 00:00:21,600
We need to have hastier mail and here says implement it because javascript relies on hastier mail and

5
00:00:21,600 --> 00:00:25,780
C S S for it to work.

6
00:00:26,450 --> 00:00:33,800
Alright tab can my text editor open and I am inside my blank hastier mouth file.

7
00:00:34,080 --> 00:00:39,990
So this is where we are going to create the hastier mail.

8
00:00:39,990 --> 00:00:48,300
Could the way this lechowick Gonna work so you don't have to watch me type or the called when a pre

9
00:00:48,430 --> 00:00:57,120
write the code and add a chunk of code at a time and then explain what I have written.

10
00:00:57,120 --> 00:01:05,220
The first line of code here is called a doctype which is a declaration is not actually part of the hate

11
00:01:05,490 --> 00:01:10,410
mail code is just a declaration A tells.

12
00:01:10,470 --> 00:01:19,230
Or gives instructions to the browser or notifies them that the document that the browser is about to

13
00:01:19,230 --> 00:01:23,070
display is an hastier Mail 5 document.

14
00:01:23,100 --> 00:01:24,590
That's all it does.

15
00:01:26,530 --> 00:01:34,660
Line 2 and 5 are they here similar tag line to the beginning located here mail tag.

16
00:01:34,790 --> 00:01:37,610
And inside the opening tag.

17
00:01:37,610 --> 00:01:46,430
We've got a link or language attribute and the value is said to English which is in for short so attributes

18
00:01:46,430 --> 00:01:51,680
basically are used to provide extra information about a tag.

19
00:01:51,710 --> 00:01:55,980
Most tips them all tags have an opening and close tack.

20
00:01:56,030 --> 00:02:01,580
So wherever you have attributes is always inserted in the opening tags.

21
00:02:01,580 --> 00:02:09,020
You can tell the clothes in tab because as the forward slash before the name of the tag.

22
00:02:10,220 --> 00:02:16,790
So any other tags were going to be using will be invested in between this.

23
00:02:16,790 --> 00:02:22,330
His team of attack came so there they're on the hastier mail would be the parent tag.

24
00:02:22,340 --> 00:02:27,910
We have child elements nested in between what we are going to do.

25
00:02:27,920 --> 00:02:38,930
Also in this lake shore we are going to use in line stylin So we are going to do some in success here

26
00:02:38,930 --> 00:02:39,830
as well.

27
00:02:40,100 --> 00:02:44,180
And then later we'll do some external see assess.

28
00:02:44,190 --> 00:02:48,430
That is will be referencing this he says from an external file.

29
00:02:49,880 --> 00:02:56,050
I have added some more code here from Lime 3 to 9.

30
00:02:56,090 --> 00:02:57,720
This is the head tags.

31
00:02:57,830 --> 00:03:01,000
The line 3 is the opening paired tag line.

32
00:03:01,010 --> 00:03:02,150
9 is the.

33
00:03:02,160 --> 00:03:02,960
Close in.

34
00:03:02,960 --> 00:03:04,030
Head tag.

35
00:03:04,370 --> 00:03:07,910
So the head tab contains some information.

36
00:03:07,910 --> 00:03:17,870
The content of the head tag is not actually visible when a visit or visiting a website is just for information

37
00:03:17,870 --> 00:03:22,360
on purposes and to help the search engines with information.

38
00:03:22,580 --> 00:03:31,280
So a line for here caught a murder tack and it's got an attribute metal tags basically are used to provide

39
00:03:31,790 --> 00:03:42,140
extra details so the info I've got the attribute car set and the value is due to if it meant a car said

40
00:03:42,220 --> 00:03:51,410
physically is used to describe the type of encoding what type of character encoding that this page will

41
00:03:51,410 --> 00:03:56,010
be using this standard is utf it which is what I have specified.

42
00:03:56,300 --> 00:04:06,270
Bam five is just a title line 6 on that many times with a name of an attribute name.

43
00:04:06,360 --> 00:04:13,480
Cause description is of value and garner that attribute called content.

44
00:04:13,820 --> 00:04:21,560
Okay so basically the name here is to give a description to as much as possible about the content of

45
00:04:21,560 --> 00:04:22,180
the page.

46
00:04:22,200 --> 00:04:28,370
That's what that is and then the out the other attribute which is content to provide the name which

47
00:04:28,370 --> 00:04:31,030
is what the game does.

48
00:04:31,190 --> 00:04:39,730
Another metal tank in line 7 is with got a attribute of name and value of viewport.

49
00:04:39,860 --> 00:04:49,960
Then the content attribute also is got with equals device minus width initial scale equals 1.

50
00:04:50,090 --> 00:04:59,360
What line 7 is saying is that this web page can be viewed by any device regardless of the screen size

51
00:04:59,450 --> 00:05:00,980
of that device.

52
00:05:00,980 --> 00:05:08,390
All right so even if you are using a little screen a large screen it will automatically reset size to

53
00:05:08,420 --> 00:05:10,340
fit that device.

54
00:05:10,340 --> 00:05:17,210
That's what this weight equals device minus with and this initial clearly of course one it allows you

55
00:05:17,210 --> 00:05:27,550
to zoom so you can start to move from one and zoom in and so that line is just a reference to the externals

56
00:05:27,550 --> 00:05:28,780
tarsha it will be you then.

57
00:05:28,810 --> 00:05:32,080
Which is the style sheet here defined here.

58
00:05:32,150 --> 00:05:37,850
So when we write some starship here war reference it is in this link.

59
00:05:37,850 --> 00:05:45,800
Notice the indentation so you can tell that the head tag is a tout of the Haitian mulct tag.

60
00:05:45,930 --> 00:05:50,580
And these men a news tax here are all children of the head tax.

61
00:05:50,580 --> 00:05:53,800
We didn't take indentation is quite true really.

62
00:05:53,990 --> 00:06:01,000
Sorry it's helpful cause he helps you understand the code better and it's also useful for those that

63
00:06:01,000 --> 00:06:01,740
are reading.

64
00:06:01,730 --> 00:06:10,170
Could I have and a lot of code here in the body attacks though the body tag.

65
00:06:10,340 --> 00:06:17,590
Any content in the body tag is the content that is visible is content that you can see on the web page.

66
00:06:17,860 --> 00:06:24,850
So that's my opening body tag on line 10 and if I go all the way to line.

67
00:06:25,520 --> 00:06:26,360
Four to one.

68
00:06:26,360 --> 00:06:29,280
Does my closing body tag there.

69
00:06:29,560 --> 00:06:30,400
All right.

70
00:06:32,860 --> 00:06:36,870
Kate let me run through the contents of the body tag.

71
00:06:37,210 --> 00:06:40,660
So line 10 is opening body tag line 11.

72
00:06:40,660 --> 00:06:45,300
I've introduced a div and I'm giving the Deve an idea of we're apart.

73
00:06:45,310 --> 00:06:50,810
So this will act as a container that will wrap or the content.

74
00:06:50,820 --> 00:06:56,950
All right so that's the opening Dave on line 11 and close in Dave online.

75
00:06:56,950 --> 00:06:58,720
Thirty seven.

76
00:06:58,940 --> 00:07:04,910
We also introduced a table tag so deterrable is well put.

77
00:07:05,230 --> 00:07:09,420
So that content and a table starts hartline 12.

78
00:07:09,480 --> 00:07:13,480
That's the opening table and the closing table is online.

79
00:07:13,480 --> 00:07:18,560
Thirty five tables consists of tedi.

80
00:07:18,580 --> 00:07:28,220
We show the actual table data where you place the data and you can have table rules as well both for

81
00:07:28,260 --> 00:07:28,830
here.

82
00:07:28,900 --> 00:07:32,900
Yes we have table data and table rows.

83
00:07:33,040 --> 00:07:36,620
So here on line 12.

84
00:07:36,850 --> 00:07:42,560
We've specified a table with how why you want the table to be.

85
00:07:42,630 --> 00:07:44,680
Choose 400 inches.

86
00:07:44,680 --> 00:07:48,410
The height is three inches a line centre.

87
00:07:48,420 --> 00:07:50,830
I want the table to be centred.

88
00:07:50,980 --> 00:07:51,390
Okay.

89
00:07:51,430 --> 00:07:53,560
That's the tool with.

90
00:07:53,590 --> 00:07:57,690
And then we get the tedi which is a table data.

91
00:07:58,010 --> 00:08:05,970
We've got Deve describe them giving the Deve idea of one and the star will also apply some styling here.

92
00:08:05,980 --> 00:08:08,730
This is what I meant by the inline stylin.

93
00:08:08,860 --> 00:08:10,880
So I'm styling it in line.

94
00:08:11,200 --> 00:08:17,580
So these are the properties have given the style font size I want to fonts to be that size the weight

95
00:08:17,590 --> 00:08:18,950
I wanted to be bold.

96
00:08:19,000 --> 00:08:23,500
So they want the item in blue a cork property here says propertys.

97
00:08:23,830 --> 00:08:32,720
Okay so the border and one of border to be five pixels and I wanted to be solid green and the padding.

98
00:08:32,830 --> 00:08:38,020
I've set it to Dad and this is what will show in that cell.

99
00:08:38,200 --> 00:08:45,330
So I repeated the same process for some of the other tables table data.

100
00:08:45,490 --> 00:08:47,180
Okay.

101
00:08:49,060 --> 00:08:56,310
Okay so DTD patchouli used to define the cell in the table.

102
00:08:56,440 --> 00:08:58,050
Y t r.

103
00:08:58,210 --> 00:09:03,210
It used to define the rule in the table of t t r.

104
00:09:03,220 --> 00:09:06,940
Here it defines the row in the table.

105
00:09:07,180 --> 00:09:10,810
Y t d defines this cell in the table.

106
00:09:11,060 --> 00:09:14,720
Right so we are using mainly tedi here.

107
00:09:15,040 --> 00:09:19,240
So line 20 to 22.

108
00:09:19,250 --> 00:09:27,070
We've defined another table tedi here which is defines the cell of a cell and inside that we've got

109
00:09:27,160 --> 00:09:29,930
a div with an I.D. number two.

110
00:09:30,130 --> 00:09:33,630
So the idea is we'll used later for stylin purposes.

111
00:09:33,760 --> 00:09:41,020
And again we have different find some success in online properties so mosul is the assessed property

112
00:09:41,080 --> 00:09:48,500
are the same so I would not be running through each and every one of them is the same font size defines

113
00:09:48,500 --> 00:09:54,000
the font font way it defines how the how Bauld the text will be.

114
00:09:54,100 --> 00:10:00,550
Padding refers to this space inside while margin refers to the space outside.

115
00:10:00,850 --> 00:10:02,910
Alright so are the processors the same.

116
00:10:02,920 --> 00:10:08,140
No way I defined a few cells on line 29 are defined.

117
00:10:08,200 --> 00:10:18,670
An input inside this cell inside a cell the cells acts come like the old container in a table saw for

118
00:10:18,670 --> 00:10:25,750
line 27 cell to 30 have defined the import element.

119
00:10:25,750 --> 00:10:30,230
So this is where you actually typing the answers to the question.

120
00:10:30,550 --> 00:10:37,350
So given is some styling standard stylin have also given it a border here.

121
00:10:37,980 --> 00:10:40,740
And these are the border properties have applied.

122
00:10:41,060 --> 00:10:49,010
Okay got another input on my 31 inside the cell and give you an idea button.

123
00:10:49,330 --> 00:10:56,170
This would be the outer button that you click to check your answers and then the row ends here.

124
00:10:56,170 --> 00:10:57,670
So this is the beginning.

125
00:10:57,670 --> 00:11:06,430
This is the end of the table row on line 30 for the opening table row is on line 13 All right and we've

126
00:11:06,430 --> 00:11:09,160
got our closing table here.

127
00:11:09,160 --> 00:11:10,410
Nine thirty five.

128
00:11:10,660 --> 00:11:12,290
Andy Deve closes.

129
00:11:12,540 --> 00:11:13,570
I am 39.

130
00:11:13,570 --> 00:11:14,740
Is this script.

131
00:11:14,890 --> 00:11:22,150
It's always good to put your script just before you close the embody tag because it prevents this group

132
00:11:22,150 --> 00:11:23,640
from executing.

133
00:11:23,650 --> 00:11:29,630
You wait for the content of the page to load first before the script is executed.

134
00:11:29,890 --> 00:11:30,760
So that is.

135
00:11:31,400 --> 00:11:39,360
Our seers are here CML and some in Lyons time in done for this project.

136
00:11:39,400 --> 00:11:45,870
So I just say that week in view and see what it looks like at the moment.

137
00:11:46,010 --> 00:11:54,140
So I just opened up the folder and just double click and see what it looks like.

138
00:11:54,290 --> 00:12:01,310
KS So this is what our uploads look at a moment there's no functionality at the moment because we need

139
00:12:01,310 --> 00:12:03,230
to define that with javascript.

140
00:12:03,230 --> 00:12:05,330
So now if you do anything it will not work.

141
00:12:05,330 --> 00:12:12,230
If I see three and click that nothing will works well the javascript will create the functionality for

142
00:12:12,230 --> 00:12:12,710
that.

143
00:12:12,830 --> 00:12:14,240
So thanks for watching.

144
00:12:14,240 --> 00:12:15,160
Bye for now.